<template>
	<view class="search-positioning">
		<view class="search-bar" @click="toSignSeach">
			<image class="search-icon" src="/static/u2326.png" mode=""></image>
			<!-- <input type="text" placeholder="搜索机构/医生" placeholder-style="color:#999">
			
			</input> -->
			<text style="color:#999 ;margin-left: 24rpx;">搜索机构/医生</text>
		</view>
	</view>
	<!-- 滑动内容 -->
	<view class="hostpital-color">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :scroll-with-animation="true">
			<view v-for="item in hospitalsList" :key="item._id" class="hostpital-box" @click="toSignPath(item._id)">
				<!-- <view>{{item}}</view> -->
				<image :src="item.image" mode="" class="search-icon-a" style="margin-left: 40rpx;"></image>
				<view class="hostpital-box-span" style=" margin-left: 40rpx;		display: flex;
		flex-direction: column;
		justify-content: space-between;">
					<text>{{item.name}}</text>
					<view class="hostpital-span">距离您3.6km</view>
				</view>
				<image src="/static/icons/u1334.png" mode="" class="hostpital-box-image" style="padding-left: 30rpx;">
				</image>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {

		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getOrganizationApi
	} from '../../../api/organization';

	onLoad(() => {
		getOrganization()
	});

	function toSignSeach() {

		uni.reLaunch({
			url: '/SignPackage/pages/sign-search/sign-search'
		})
	}
	const hospitalsList = ref([]);
	// 获取机构的数据
	function getOrganization() {
		getOrganizationApi()
			.then(res => {
				if (res.code == 200) {
					hospitalsList.value = res.data.rows;
				}
			})
	}

	function toSignPath(_id) {
		// console.log(_id);
		uni.setStorageSync('organizationId', _id)
		uni.navigateTo({
			url: '/SignPackage/pages/sign/sign?_id=' + _id
		})
	}
</script>

<style lang="scss">
	.search-input {
		flex: 1;
		font-size: 28rpx;
	}

	.search-positioning {
		position: relative;
		height: 100rpx;
	}

	.search-icon-a {
		width: 160rpx;
		height: 160rpx;
	}

	.hostpital-box-image {
		width: 22rpx;
		height: 22rpx;
	}

	.hostpital-box {
		width: 670rpx;
		height: 226rpx;
		border: 1px solid #eee;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
		margin: 20rpx auto;
		border-radius: 30rpx;

	}

	.hostpital-box-span {
		width: 350rpx;
		text-align: left;
		height: 125rpx;

	}

	.scroll-Y {
		position: absolute;
		top: 100rpx;
		height: calc(100% - 100rpx);
		/* 占满剩余高度 */
		// padding: 0 20rpx;
		background-color: #f6fafd;
	}

	.hostpital-color {
		background-color: #f6fafd;

	}

	.hostpital-span {
		margin-top: 20rpx;
		font-size: 22rpx;
		color: #999999;
	}

	.search-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.search-bar {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 20rpx;
		border: 1px solid #eee;
		width: 602rpx;
		height: 52rpx;
		margin: 20rpx auto;
	}
</style>